@reset-size: 24px;

.c-layout{
    position: absolute;
    height: 100%;
    width: 100%;
    &>*{
        position: absolute;
        &:hover>.reset{
            display: block;
        }
        &>.reset{
            position: relative;
            display: none;
            width: @reset-size;
            height: @reset-size;
            cursor: move;
        }
        &.c-layout-head>.reset{
            float: right;
        }
        &.c-layout-foot>.reset{
            float: left;
        }
    }

    &>.c-layout-body{
        overflow: auto;
    }


    &.H{
        &>*{
            top: 0px;
            height: 100%;
            bottom: 0px;
        }
        &>.c-layout-head{
            left: 0px;
        }
        &>.c-layout-foot{
            right: 0px;
        }
    }
    &.V{
        &>*{
            left: 0px;
            width: 100%;
            right: 0px;
        }
        &>.c-layout-head{
            top: 0px;
        }
        &>.c-layout-foot{
            bottom: 0px;
        }
    }
}

.layout-block>*[class^='c-'] {
    display: block !important;
    width: 100%;
}
.layout-inline>*[class^='c-'] {
    display: inline-block !important;
    margin-right: 10px;
}
.layout-stacked>*[class^='c-'] {
    display: block !important;
    margin-left: 0px;
    margin-right: 0px;
    &>*{
        display: block !important;
        float: none !important;
        width: 100% !important;
    }
}
